<template>
  <div>
    <template v-if="itemData.type === 'inputRange'">
      <FormItem :label="`${itemData.label}：`" :prop="propName">
        <Row>
          <Col span="10">
            <FormItem :label-for="itemData.valueArr[0].name">
              <div class="qw-form-txt" v-if="itemData.readonly">
                {{ formData[itemData.valueArr[0].name] }}
              </div>
              <Input
                v-else
                v-model="formData[itemData.valueArr[0].name]"
                :type="itemData.inputType"
                :maxlength="itemData.maxLen ? itemData.maxLen : 255"
                :show-word-limit="
                  itemData.showWordLimit ? itemData.showWordLimit : false
                "
                :placeholder="itemData.valueArr[0].placeholder"
                :element-id="itemData.valueArr[0].name"
                @on-change="handleInputChange"
              >
                <span
                  v-if="
                    itemData.valueArr[0].prepend &&
                    itemData.valueArr[0].prepend !== ''
                  "
                  slot="prepend"
                  >{{ itemData.valueArr[0].prepend }}</span
                >
                <span
                  v-if="
                    itemData.valueArr[0].append &&
                    itemData.valueArr[0].append !== ''
                  "
                  slot="append"
                  >{{ itemData.valueArr[0].append }}</span
                >
              </Input>
            </FormItem>
          </Col>
          <Col span="4" class="qw-text-c">-</Col>
          <Col span="10">
            <FormItem
              :prop="itemData.valueArr[1].name"
              :label-for="itemData.valueArr[1].name"
            >
              <div class="qw-form-txt" v-if="itemData.readonly">
                {{ formData[itemData.valueArr[1].name] }}
              </div>
              <Input
                v-else
                v-model.trim="formData[itemData.valueArr[1].name]"
                :type="itemData.inputType"
                :maxlength="itemData.maxLen ? itemData.maxLen : 255"
                :show-word-limit="
                  itemData.showWordLimit ? itemData.showWordLimit : false
                "
                :placeholder="itemData.valueArr[1].placeholder"
                :element-id="itemData.valueArr[1].name"
                @on-change="handleInputChange"
              >
                <span
                  v-if="
                    itemData.valueArr[1].prepend &&
                    itemData.valueArr[1].prepend !== ''
                  "
                  slot="prepend"
                  >{{ itemData.valueArr[1].prepend }}</span
                >
                <span
                  v-if="
                    itemData.valueArr[1].append &&
                    itemData.valueArr[1].append !== ''
                  "
                  slot="append"
                  >{{ itemData.valueArr[1].append }}</span
                >
              </Input>
            </FormItem>
          </Col>
        </Row>
      </FormItem>
    </template>
    <template v-else-if="itemData.type === 'input'">
      <FormItem :label="`${itemData.label}：`" :prop="propName">
        <div class="qw-form-txt" v-if="itemData.readonly">
          {{ formData[itemData.name] }}
        </div>
        <!-- @keyup.native="$event.target.value = $event.target.value.replace(/(^\s+)|(\s+$)/g,'')" -->
        <Input
          v-else
          v-model.trim="formData[itemData.name]"
          :type="itemData.inputType ? itemData.inputType : 'text'"
          :maxlength="itemData.maxLen ? itemData.maxLen : 255"
          :show-word-limit="
            itemData.showWordLimit ? itemData.showWordLimit : false
          "
          :placeholder="itemData.placeholder"
          :disabled="itemData.disabled ? itemData.disabled : false"
          @on-change="handleInputChange"
        />
      </FormItem>
    </template>
    <template v-else-if="itemData.type === 'textarea'">
      <FormItem :label="`${itemData.label}：`" :prop="propName">
        <div class="qw-form-txt" v-if="itemData.readonly">
          {{ formData[itemData.name] }}
        </div>
        <Input
          v-else
          v-model.trim="formData[itemData.name]"
          :type="itemData.inputType"
          :maxlength="itemData.maxLen ? itemData.maxLen : 255"
          :show-word-limit="
            itemData.showWordLimit ? itemData.showWordLimit : false
          "
          :placeholder="itemData.placeholder"
          @on-change="handleInputChange"
        />
      </FormItem>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    itemData: {
      type: Object
    },
    formData: {
      type: Object
    }
  },
  data () {
    return {
      propName: '', // 校验规则名称
      dataList: []
    };
  },
  created () {
    if (this.itemData.type === 'inputRange') {
      this.propName = this.itemData.valueArr[0].name;
    } else {
      this.propName = this.itemData.name;
    }
  },
  methods: {
    handleInputChange (event) {
      this.$emit('handleChangeFormData', this.formData);
    }
  }
};
</script>
